<template>
  <div class="pay-method">
    <div>
      <span>收费单位:</span>
      <span>{{ payMethodInfo.name }}</span>
    </div>
    <div>
      <span>缴纳方式:</span>
      <van-dropdown-menu  :overlay='false'>
        <van-dropdown-item @change='change'  v-model="value" :options="payMethodInfo.option" />
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  props: {
    payMethodInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  emits:['optionsChange'],
  components: {

  },
  setup(props,{emit}) {
    const value= ref(0);
    const change=(value)=>{
      emit('optionsChange',value)
    }
    return {
      value,
      change
    }

  }
})
</script>

<style scoped lang="less">
.pay-method {
  display: flex;
  flex-direction: column;
  padding: 6vw;
  color: #434343;
  div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1vh 0;
    &:deep(.van-dropdown-menu__bar){
      box-shadow:none!important;
    }
    &:deep(.van-popup--top){
      padding-left:3vw!important;
    }
  }
}
</style>
